<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>库存管理</title>
  <link rel="stylesheet" href="css/http_cdn.jsdelivr.net_npm_bootstrap-icons@1.10.0_font_bootstrap-icons.css">
  <style>
    body {
      font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
      background-color: #f8f9fa;
      margin: 0;
      padding: 20px;
      color: #333;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      background: white;
      border-radius: 8px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
      padding: 20px;
    }

    .page-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid #eee;
    }

    .page-title {
      font-size: 24px;
      font-weight: 600;
      color: #2c3e50;
    }

    .btn {
      padding: 8px 16px;
      border-radius: 4px;
      font-size: 14px;
      cursor: pointer;
      border: none;
      transition: all 0.3s;
    }

    .btn-primary {
      background-color: #3498db;
      color: white;
    }

    .btn-primary:hover {
      background-color: #2980b9;
    }

    .btn-success {
      background-color: #28a745;
      color: white;
    }

    .btn-success:hover {
      background-color: #218838;
    }

    .table-container {
      overflow-x: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    th, td {
      padding: 12px 15px;
      text-align: left;
      border-bottom: 1px solid #eee;
    }

    th {
      background-color: #f8f9fa;
      font-weight: 600;
      color: #2c3e50;
    }

    tr:hover {
      background-color: #f5f7fa;
    }

    .badge {
      display: inline-block;
      padding: 4px 8px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 500;
    }

    .badge-success {
      background-color: #d4edda;
      color: #155724;
    }

    .badge-warning {
      background-color: #fff3cd;
      color: #856404;
    }

    .badge-danger {
      background-color: #f8d7da;
      color: #721c24;
    }

    .action-btn {
      padding: 5px 10px;
      margin-right: 5px;
      border-radius: 3px;
      font-size: 12px;
      cursor: pointer;
    }

    .action-btn.edit {
      background-color: #ffc107;
      color: #212529;
    }

    .action-btn.view {
      background-color: #17a2b8;
      color: white;
    }

    .search-bar {
      display: flex;
      margin-bottom: 20px;
    }

    .search-input {
      flex: 1;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px 0 0 4px;
      outline: none;
    }

    .search-btn {
      padding: 10px 15px;
      background-color: #3498db;
      color: white;
      border: none;
      border-radius: 0 4px 4px 0;
      cursor: pointer;
    }

    .filter-bar {
      display: flex;
      margin-bottom: 20px;
      gap: 15px;
    }

    .filter-item {
      flex: 1;
    }

    .filter-item label {
      display: block;
      margin-bottom: 5px;
      font-weight: 500;
    }

    .filter-item select, .filter-item input {
      width: 100%;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }

    .pagination {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }

    .page-item {
      margin: 0 5px;
    }

    .page-link {
      padding: 8px 12px;
      border: 1px solid #ddd;
      border-radius: 4px;
      color: #3498db;
      text-decoration: none;
    }

    .page-link.active {
      background-color: #3498db;
      color: white;
      border-color: #3498db;
    }

    .stock-low {
      color: #dc3545;
      font-weight: 600;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="page-header">
    <h1 class="page-title"><i class="bi bi-box-seam"></i> 库存管理</h1>
    <div>
      <button class="btn btn-success"><i class="bi bi-file-earmark-excel"></i> 导出Excel</button>
      <button class="btn btn-primary" id="addInventoryBtn"><i class="bi bi-plus"></i> 入库</button>
    </div>
  </div>

  <div class="search-bar">
    <input type="text" class="search-input" placeholder="搜索产品名称或SKU...">
    <button class="search-btn"><i class="bi bi-search"></i> 搜索</button>
  </div>

  <div class="filter-bar">
    <div class="filter-item">
      <label>分类</label>
      <select>
        <option value="">全部分类</option>
        <option value="1">电子产品</option>
        <option value="2">服装</option>
        <option value="3">食品</option>
        <option value="4">家居用品</option>
      </select>
    </div>
    <div class="filter-item">
      <label>库存状态</label>
      <select>
        <option value="">全部状态</option>
        <option value="1">库存充足</option>
        <option value="2">库存预警</option>
        <option value="3">库存不足</option>
      </select>
    </div>
    <div class="filter-item">
      <label>仓库</label>
      <select>
        <option value="">全部仓库</option>
        <option value="1">北京仓库</option>
        <option value="2">上海仓库</option>
        <option value="3">广州仓库</option>
      </select>
    </div>
  </div>

  <div class="table-container">
    <table>
      <thead>
      <tr>
        <th>产品ID</th>
        <th>产品名称</th>
        <th>SKU</th>
        <th>分类</th>
        <th>仓库</th>
        <th>当前库存</th>
        <th>预警值</th>
        <th>状态</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>1001</td>
        <td>智能手机X1</td>
        <td>SKU-2023001</td>
        <td>电子产品</td>
        <td>北京仓库</td>
        <td>125</td>
        <td>50</td>
        <td><span class="badge badge-success">充足</span></td>
        <td>
          <button class="action-btn view"><i class="bi bi-eye"></i> 详情</button>
          <button class="action-btn edit"><i class="bi bi-pencil"></i> 调整</button>
        </td>
      </tr>
      <tr>
        <td>1002</td>
        <td>无线耳机Pro</td>
        <td>SKU-2023002</td>
        <td>电子产品</td>
        <td>上海仓库</td>
        <td>42</td>
        <td>30</td>
        <td><span class="badge badge-warning">预警</span></td>
        <td>
          <button class="action-btn view"><i class="bi bi-eye"></i> 详情</button>
          <button class="action-btn edit"><i class="bi bi-pencil"></i> 调整</button>
        </td>
      </tr>
      <tr>
        <td>1003</td>
        <td>男士T恤(白色)</td>
        <td>SKU-2023003</td>
        <td>服装</td>
        <td>广州仓库</td>
        <td class="stock-low">12</td>
        <td>20</td>
        <td><span class="badge badge-danger">不足</span></td>
        <td>
          <button class="action-btn view"><i class="bi bi-eye"></i> 详情</button>
          <button class="action-btn edit"><i class="bi bi-pencil"></i> 调整</button>
        </td>
      </tr>
      <tr>
        <td>1004</td>
        <td>有机大米5kg</td>
        <td>SKU-2023004</td>
        <td>食品</td>
        <td>北京仓库</td>
        <td>78</td>
        <td>40</td>
        <td><span class="badge badge-success">充足</span></td>
        <td>
          <button class="action-btn view"><i class="bi bi-eye"></i> 详情</button>
          <button class="action-btn edit"><i class="bi bi-pencil"></i> 调整</button>
        </td>
      </tr>
      <tr>
        <td>1005</td>
        <td>陶瓷餐具套装</td>
        <td>SKU-2023005</td>
        <td>家居用品</td>
        <td>上海仓库</td>
        <td class="stock-low">8</td>
        <td>15</td>
        <td><span class="badge badge-danger">不足</span></td>
        <td>
          <button class="action-btn view"><i class="bi bi-eye"></i> 详情</button>
          <button class="action-btn edit"><i class="bi bi-pencil"></i> 调整</button>
        </td>
      </tr>
      </tbody>
    </table>
  </div>

  <div class="pagination">
    <a href="#" class="page-link">&laquo;</a>
    <a href="#" class="page-link active">1</a>
    <a href="#" class="page-link">2</a>
    <a href="#" class="page-link">3</a>
    <a href="#" class="page-link">&raquo;</a>
  </div>
</div>

<script>
  // 添加入库按钮点击事件
  document.getElementById('addInventoryBtn').addEventListener('click', function() {
    alert('打开入库操作界面');
    // 这里可以添加打开入库界面的代码
  });

  // 详情按钮点击事件
  document.querySelectorAll('.action-btn.view').forEach(btn => {
    btn.addEventListener('click', function() {
      alert('查看库存详情');
      // 这里可以添加查看详情的代码
    });
  });

  // 调整按钮点击事件
  document.querySelectorAll('.action-btn.edit').forEach(btn => {
    btn.addEventListener('click', function() {
      alert('调整库存数量');
      // 这里可以添加调整库存的代码
    });
  });
</script>
</body>
</html>